// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// less
import './index.less'
import If from '../../../../components/page-components/if'

class VipCard extends Component {
  constructor (props) {
    super(props)
    this.state = {
      vipType: {
        vip2: '月度会员',
        vip3: '半年会员',
        vip1: '年度会员'
      }
    }
  }
  componentWillMount () {
    // onLoad
  }

  componentDidMount () {
    // onready
  }

  componentWillUnmount () {
    // onUnload
  }

  componentWillReceiveProps (nextprops) {}

  delay (time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  onNoVip = () => {
    // 非vip跳转页面
    this.props.onNoVip()
  }

  onVip = () => {
    // vip跳转页面
    this.props.onVip()
  }

  render () {
    const { vipData, memberType } = this.props
    const { vipType } = this.state
    return (
      <View className="VipCard_id02671">
        <If visible={vipData}>
          <View className="no-vip-card" onClick={this.onVip}>
            <View className="no-vip-left">
              <Image
                mode="widthFix"
                className="no-vip-title"
                src="https://imagesize.hrwork.com/sp/files/d1c98ac1-90d3-490e-a99e-fd81a2dea57d.png"
              />
              <View className="no-vip-subtext">
                <View className="no-vip-tip">{vipType[memberType]}</View>
              </View>
            </View>

            <View className="no-vip-right">
              <View className="no-vip-right-desc">
                <View className="desc-text coffee-color">
                  <View className="desc-dot" />
                  {vipType[memberType]}
                </View>
                <View className="desc-text">
                  <View className="desc-dot" />
                  招聘效率提高
                  <Image
                    src="https://imagesize.hrwork.com/sp/files/f511b323-abca-41f1-b0f1-5c57b0d1fca1.png"
                    className="desc-img"
                  />
                  {/* <Text>90%</Text> */}
                </View>
              </View>
              <Image
                className="no-vip-arrow"
                src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
              />
            </View>
          </View>
        </If>

        <If visible={!vipData}>
          <View className="no-vip-card" onClick={this.onNoVip}>
            <View className="no-vip-left">
              <Image
                mode="widthFix"
                className="no-vip-title"
                src="https://imagesize.hrwork.com/sp/files/d1c98ac1-90d3-490e-a99e-fd81a2dea57d.png"
              />
              <View className="no-vip-subtext">
                <View className="no-vip-price">199</View>
                <View className="no-vip-tip">会员特价</View>
              </View>
            </View>

            <View className="no-vip-right">
              <View className="no-vip-right-desc">
                <View className="desc-text">
                  <View className="desc-dot" />
                  开通VIP 享海量权益
                </View>
                <View className="desc-text">
                  <View className="desc-dot" />
                  招聘效率提高90%
                </View>
              </View>
              <Image
                className="no-vip-arrow"
                src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
              />
            </View>
          </View>
        </If>
      </View>
    )
  }
}

export default VipCard
